/*
 * 测肤统计的折线图
 * @Author: ljb
 * @Date: 2018-08-13 17:09:33
 * @Last Modified by: ljb
 * @Last Modified time: 2018-08-24 13:38:14
 */
<style  lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-home-customer-skin-chart {
        width: 100%;
		height: 40vh;
    }

</style>
<template>
	<div
		:id="`skin_chart_${type}`"
		class="v-home-customer-skin-chart"/>
</template>

<script>
import echarts from 'echarts';

export default {
	name: 'VisitLineChart',
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		skinStatistics: {
			type: Array,
			default() {
				return [];
			},
		},
		dataType: {
			type: String,
			default() {
				return 'month';
			},
		},
		type: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			line_chart: null,
			type_title: '',
			title_map: {
				year: this.$t('home.year'),
				month: this.$t('home.month'),
				day: this.$t('home.day'),
			},			// 折线图的y轴的title映射表
			word_map: {
				store: 'name',
				device: 'device_name',
			},			// store和device的name字段map
			chart_option_map: {
				store: {
					title: this.$t('home.store_title'),
				},
				device: {
					title: this.$t('home.device_title'),
				},
			},
		};
	},
	watch: {
		skinStatistics: {
			handler() {
				this.formatData();
			},
			deep: true,
		},
		loading() {
			if (this.loading) {
				this.line_chart.showLoading();
			} else {
				this.line_chart.hideLoading();
			}
		},
	},
	mounted() {
		this.line_chart = echarts.init(document.getElementById(`skin_chart_${this.type}`));
	},
	methods: {
		/**
         * 初始化折线图
		 * @param  {Array} legend_data {图例名称}
		 * @param  {Object} grid        {位置配置}
		 * @param  {Object} xAxis       {x轴的配置参数}
		 * @param  {Object} yAxis       {y轴的配置参数}
		 * @param  {Array} series      {数据参数}
		 * @param  {Number} dataZoom    {x轴显示数量控制}
		 * @return {undefined}
		 */
		initChart({
			legend_data, grid, xAxis, yAxis, series, dataZoom,
		}) {
			this.line_chart.clear();

			const option = {
				title: {
					text: this.chart_option_map[this.type].title,
					left: 'center',
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
					},
				},
				legend: {
					data: legend_data,
					type: 'scroll',
					x: 'center',
					y: '36',
					width: '50%',
				},
				axisPointer: {
					snap: true,
					lineStyle: {
						color: '#ccc',
					},
					// @see {@link http://echarts.baidu.com/option.html#axisPointer.label.precision}
					label: {
						precision: 0,
					},
				},
				dataZoom: [
					{ // 这个dataZoom组件，也控制x轴。
						type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
						realtime: true,
						start: 100 - dataZoom,
						end: 100,
						zoomLock: true,
					},
				],
				grid,
				xAxis,
				yAxis,
				series,
			};

			this.line_chart.setOption(option);
		},

		/**
         * 格式化数据的主方法
         * @return {undefined}
         */
		formatData() {
			const chart_option = {
				legend_data: [],
				grid: {
					left: '8%',
					top: '28%',
					bottom: '8%',
					containLabel: true,
				},
				xAxis: {
					boundaryGap: false,
					nameLocation: 'center',
					axisTick: {
						alignWithLabel: true,
					},
					data: [],
				},
				yAxis: {
					name: `${this.type_title + this.$t('home.test_number')}`,
					type: 'value',
				},
				series: [],
				dataZoom: 5,
			};

			const device_width = document.querySelector('.v-home-customer-skin-chart').offsetWidth;

			const data_length = this.skinStatistics[0] ? this.skinStatistics[0].count_skin.length : 1;

			const max_dataZoom = (parseFloat((device_width / 120).toFixed(2)) * 100) / data_length;

			chart_option.dataZoom = max_dataZoom;

			this.skinStatistics.forEach((statistics, index) => {
				const name = statistics[this.word_map[this.type]] || this.$t('common.unknown');

				const serie = {
					name,
					type: 'line',
					stack: this.type,
					areaStyle: { normal: {} },
					data: [],
				};

				statistics.count_skin.forEach((test) => {
					const { date } = test;
					const { count } = test;
					if (index === 0) {
						chart_option.xAxis.data.push(date);
					}
					serie.data.push(count);
				});

				chart_option.legend_data.push(name);
				chart_option.series.push(serie);
			});

			this.initChart(chart_option);
		},
	},
};
</script>
